@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import './flex.scss';

:root{
  --theme: #1664FF;
  --active: #E9F4FF;
  --hover: #eee;
  // 过度动画时长-菜单
  --nav-transition-time: 0.28s;
}
html, body, #app{
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//main-container全局样式
.app-container {
  padding: 16px;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.text-center {
  text-align: center
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color: #fff;
  }

  &.draft {
    background: #d0d0d0;
  }

  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

// 美化滚动条
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: solid 4px transparent;
  background-clip: content-box;
  background-color: #cdcdcd;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
/* 系统主题色-暗色主题 */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background-color: #686868;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #7b7b7b;
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: #a1a1a1;
  }
}

// 详情页
._pageDetail{
  padding: 16px;
  >._header,
  ._pageDetail-header
  {
    display: flex;
    align-items: center;
    padding: 12px;
    font-size: 20px;
    color: #333;
  }
  >._card,
  ._pageDetail-card
  {
    >._title{
      font-size: 20px;
      font-weight: 700;
      color: #5c5c5c;
      display: flex;
      align-items: center;
      padding-bottom: 6px;
      margin-bottom: 12px;
      border-bottom: 1px solid #8d8d8d36;
    }
    background-color: #FFFFFF;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 20px 24px 24px 24px;
    box-shadow: 3px 3px 10px #8d8d8d36;
    >._grid,
    ._pageDetail-card-grid
    {
      --label-width: 100px;
      --base-width: 300px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--base-width), 1fr));
      grid-column-gap: 24px;
      grid-row-gap: 16px;
    }
  }
}

// el-form--inline中medium尺寸的输入框和下拉选择框统一宽度
.el-form--inline .el-form-item__label+.el-form-item__content>.el-input--medium{
	width: 220px;
}
.el-form--inline >.el-form-item--medium >.el-form-item__content >.el-select--medium{
  width: 220px;
}
// select 多选隐藏时避免因文字过长导致换行  _tag-inline
.el-form .el-select._tag-inline .el-select__tags .el-tag{
  max-width: 72% !important;
}
// 输入框底部提示不固定高度
._tipsNoHeight.el-form-item{
	margin-bottom: 0;
	.el-form-item__error{
		position: static;
	}
}

// 表格头必填标识
th._requiredTag>.cell::before{
  content: '* ';
  color: #ff4949;
}

// 数字输入框优化
.el-input__inner[type=number]{
  // 解决el-input数组输入框，输入中文光标上移问题,（可能会导致input换行\抖动）
  line-height: 1px !important;
  padding-right: 0;
  +.el-input__suffix{
    margin-right: 10px;
  }
}
//在el-select前面加必填标识
._requireSelect{
  display:flex;
  justify-content: flex-start;
  align-items: center;

&::before{
  display: inline-block;
  content: '* ';
  color: #ff4949;
  margin-right: 5px;
}
}
// table 表格内容始终显示在单元格内
._tableCellSticky{
  .cell{
    position: sticky;
    top: 0;
    bottom: 0;
  }
}
// el-table固定列下横向滚动条无法拖动bug修复 表格最外层标签添加类名
._fixed-scroll-error {
  .el-table--scrollable-x .el-table__body-wrapper {
    z-index: 2;
  }
}
// 兼容safari列头与td对不齐问题
.el-table__header, .el-table__body, .el-table__footer{
  width:100% !important;
  table-layout: fixed !important;
}
// checkbox 变为绿色
._checkboxGreen{
  .el-checkbox__input.is-checked .el-checkbox__inner{
		background-color: #13ce66;
		border-color: #13ce66;
	}
}
// _input-center 表格内输入框内容居中
.el-table ._input-center .cell .el-input .el-input__inner{
  text-align: center;
}

// entity-fixed组件搭配pagination组件使用时，pagination组件的样式
._entity-fixed_pagination{
  background-color: transparent !important;
  >.el-pagination{
    padding: 5px 20px;
    border-radius: 40px;
    box-shadow: 0 0 4px rgba(0, 21, 41, 0.18);
    background-color: white;
  }
}
// 删除按钮样式
._delete-btn{
  --btnColor:#ff4949;
  padding: 3px 7px;
  border: 0;
  background-color: transparent;
  &:hover{
    background-color: var(--btnColor);
    .el-icon-minus{
      color: #ffffff;
    }
  }
  .el-icon-minus{
    color: var(--btnColor);
    font-weight: 700;
  }
}
// el-table 点击后展示编辑框
._active_show_edit{
  .el-input,
  .tableBox .el-select{
      display: none;
  }
  .current-row {
    .el-select, .el-input{
      display: block;
    }
    .el-select + span,
    .el-input + span{
      display: none;
    }
  }
}
._remove_arrow{
	// 去掉number input 中的上下箭头
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	    -webkit-appearance: none !important;
	}
}
// 移除el-table固定列的边框（只有固定列el-table重新计算高度有误）
._table_fixed_removeBorder{
  .el-table__fixed::before{
    background-color:transparent;
  }
}

// 自适应高度剩余滚动
._autoHeight{
  height: 100%;
  display: flex;
  flex-direction: column;
  >*{
    flex-shrink: 0;
  }
  >._scroll{
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
// footer-btn
._footer-btn{
  position: fixed;
  bottom: 20px;
  left: 50%;
  background-color: #ffffff99;
  box-shadow: 1px 2px 5px rgba(48, 48, 48, 0.18);
  border-radius: 18px;
  padding: 10px 30px;
  z-index: 20;
}
// 可新增的下拉框 新增的项突出显示
._selectPopple_newSigns{
    .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
        li.el-select-dropdown__item:not(.hasItem){
          position: relative;
          background-color: #13ce671c;
          span::after{
              content: "增";
              display: block;
              cursor: pointer;
              width: 22px;
              height: 34px;
              opacity: 1;
              -webkit-transition: all 0.3s;
              transition: all 0.3s;
              position: absolute;
              background-color: #13ce66;
              text-align: center;
              line-height: 34px;
              font-size: 14px;
              color: #fff;
              font-weight: 700;
              right: 0px;
              top: 0px;
            }
        }
    }
}
// 在select中加载的动效
.el-select .el-loading-mask{
  z-index:100;
      .el-loading-spinner{
      margin-top: -12px;
      .circular{
          height: 25px !important;
          width: 25px !important;
      }
  }
}
// 列表合计行加载动效
.el-table._table-summary-loading{
    .el-table__fixed-footer-wrapper{
        td:nth-child(1){
            position: relative;
            &::before{
                content: "获取中";
                animation: identifier 1s infinite;
                text-align: center;
                line-height: 45px;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: #f8f8f8;
                height: 100%;
                z-index: 100;
            }
        }
        td:nth-child(2){
            background-color: #f8f8f8;
        }
    }
    &._table-summary-error{
      .el-table__fixed-footer-wrapper{
        td:nth-child(1)::before{
          content: "获取失败";
          animation: none;
        }
      }
    }
    .has-gutter:not(thead) td{
        background-color: #f8f8f8;
        position: relative;
        &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: #f8f8f8;
        }
    }
    @keyframes identifier {
      0%{
        content: "获取中";
      }
      33%{
        content: "获取中.";
      }
      66%{
        content: "获取中..";
      }
      100%{
        content: "获取中...";
      }
    }
}
// 解决el-table固定列下和添加合计后 横向滚动条无法拖动bug
.el-table--scrollable-x .el-table__body-wrapper {
    z-index: 2;
}

._default_page {
    height: 100%;
    display: flex;
    flex-direction: column;
    >._card {
      & +._card {
        flex: 1;
      }
      &:nth-last-child(1) {
        margin-bottom: 10px;
      }
    }
    .el-form-item{
      margin-bottom: 5px;
    }
    ._card{
      background-color: #fff;
      border-radius: 12px;
      margin: 10px 10px 0 10px;
      padding: 20px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
      overflow-y: auto;
    }
    ._card_box {
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
}

._reportTable {
  tbody tr:hover>td {
      background-color:unset !important;
  }
	// 全局单元格
	.el-table__body .el-table__cell{
        border-bottom: 1px solid #010101;
        border-right: 1px solid #010101;
        padding:0;
		.cell{
			&::before{
				content: '.';
				opacity: 0;
			}
			color: #642f93;
			text-align: center;
			padding: 5px 0;
			position: relative;
			display: block;
		}
	}
  .el-table__footer-wrapper .el-table__cell{
    text-align: center;
  }
	// 表头
	.el-table__header-wrapper thead th{
		background-color: #642f93 !important;
		.cell{
			text-align: center;
			font-size: 16px;
			color: #fff;
		}
	}
	// 整体表格
    .el-table--group, .el-table--border {
        border: 1px solid #010101;
        border-bottom: none;
        border-right: none;
    }
	// 高亮头部
	.highlightTitle .cell{
      background: #fec73a;
      font-weight: 700;
      font-size: 16px;
  }
	// 高亮黄色单元格
	.highlight {
      background: #ffd84d !important;
      td,
      .cell{
        background: #ffd84d !important;
    }
  }
	// 高亮黄色单元格
	.highlight_blue {
    background: #85c4ff !important;
    td,
    .cell{
        background: #85c4ff !important;
        color: #000000 !important;
    }
  }
  .highlight_purple{
    td,
    .cell{
        background: #642f93 !important;
        color: white !important;
    }
  }
	// 进度条
	.progress {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		&::before{
			content: '1';
			display: block;
			width: var(--width);
			background: linear-gradient(to right, #fca32742, #fca327);
			// border-right: 1px solid #ffd498;
			height: 100%;
			color: transparent;
		}
		>*{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 50%;
			padding: 5px;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
	}
	// 浅色背景
	.rageBgc{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 5px;
		background: hsla(135, 37%, 53%, var(--rate))
	}
}

